<template>

  <div>
    <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>
    <div><br />
    </div>
    <div id="xlsxChart"style="height: 600%;width: 100%"></div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import XLSX from "xlsx";  //引入xlsx
  export default {
    data() {
      return {
        databar:'',
      }
    },


    /* created() {
      this.getDetailsList()
    }, */


    /* 接收groupIdex传来的参数 */
    mounted(){
      this.databar = this.$route.query.b
      this.updateChart()
    },

    methods:{
      //初始化echartInstance对象
      initChart(){
        this.myChart = echarts.init(document.getElementById('xlsxChart'));
      },
      //获取数据
      getData(){},
      //更新图标
      updateChart(){
        const ha = this.databar.colHeaders
        const sellerName = this.databar.data.map((item) =>{
          return item.A
        })
        console.log("sellerName",sellerName)
        const sellerValue = this.databar.data.map((item) =>{
          return item.B
        })
        const option = {
          title: {
            text: '矩形树图'
          },
          tooltip: {rigger: 'item',
            formatter: "{b}: {c}"},
          legend: {},
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : false,
          series : [
            {
              name:ha[1],
              type:'treemap',
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    formatter: "{b}"
                  },
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    show: true
                  }
                }
              },
              data:[
                {
                  children: [{
                    name: sellerName[0],
                    value: sellerValue[0]
                  }, {
                    name: sellerName[1],
                    value: sellerValue[1]
                  },
                    {
                      name: sellerName[2],
                      value: sellerValue[2]
                    },
                    {
                      name: sellerName[3],
                      value: sellerValue[3]
                    },
                    {
                      name: sellerName[4],
                      value: sellerValue[4]
                    },
                    {
                      name: sellerName[5],
                      value: sellerValue[5]
                    },
                    {
                      name: sellerName[6],
                      value: sellerValue[6]
                    },
                    {
                      name: sellerName[7],
                      value: sellerValue[7]
                    },
                    {
                      name: sellerName[8],
                      value: sellerValue[8]
                    },
                    {
                      name: sellerName[9],
                      value: sellerValue[9]
                    },
                    {
                      name: sellerName[10],
                      value: sellerValue[10]
                    },
                    {
                      name: sellerName[11],
                      value: sellerValue[11]
                    },
                    {
                      name: sellerName[12],
                      value: sellerValue[12]
                    },
                    {
                      name: sellerName[13],
                      value: sellerValue[13]
                    },
                    {
                      name: sellerName[14],
                      value: sellerValue[14]
                    },
                  ]
                },

              ]
            }

          ]
        }
        let myChart = echarts.init(document.getElementById('xlsxChart'));
        myChart.setOption(option)
      },

    }

  }
</script>

<style>

</style>
